<template>
	<view>
		<custom-nav-sq-xcx :isBack="true" currBg="usuallyBg" :needConBlock="true">
			<block slot="content">选择职业</block>
		</custom-nav-sq-xcx>
		<sq-screen-area :formFlag="true" :needBtnFlag="true">
			<block slot="formRes" class="formRes">
				<view class="infoItem">
					<view class="itemTit">姓名</view>
					<view class="itemCon">黄利峰</view>
				</view>
				<view class="infoItem">
					<view class="itemTit">性别</view>
					<view class="itemCon">男</view>
				</view>
				<view class="infoItem">
					<view class="itemTit">年龄</view>
					<view class="itemCon">36</view>
				</view>
				<view class="infoItem">
					<view class="itemTit">所在社区</view>
					<view class="itemCon">明日新城社区</view>
				</view>
				<view class="infoItem">
					<view class="itemTit">职业</view>
					<picker class="itemCon useWork hasFlex"  @change="bindZyFilter" :value="zyIndex" :range="zyFilter">
						<text class="street" :class="[isSelZyFlag ? 'hasSel' : '']">{{userWork}}</text>
						<text class="iconfont icon-sanjiao"></text>
					</picker>
				</view>
			</block>
			<block slot="formBtn">
				<button class="comBtn sq hasBorRad" @tap="goCp">确定</button>
			</block>
		</sq-screen-area>
	</view>
</template>

<script>
	import SqScreenArea from "@/components/sq-screen-area";
	export default {
		components:{
			SqScreenArea
		},
		data(){
			return{
				userWork:'请选择职业',
				zyIndex:-1,
				isSelZyFlag:false,
				zyFilter:['机关工作人员','政法工作人员','企业员工','个体工商户','城乡居民','教育工作者','医疗工作者','武装力量','学生','其他'],
			}
		},
		methods:{
			bindZyFilter(e){
				this.zyIndex = e.detail.value;
				this.isSelZyFlag = true;
				this.userWork = this.zyFilter[this.zyIndex];
			},
			goCp(){
				uni.navigateTo({
					url:"/pages/subSqIndex/xlcp/cpQue"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.formRes{
		height: calc(100% - 200rpx);
		background: $sq-fuf;
		padding: 80rpx 30rpx 0;
		$hei:90rpx;
		.infoItem{
			display: flex;
			font-size: 28rpx;
			color: $sq-main8;
			margin-bottom: 30rpx;
			&:last-child{
				margin-bottom: 0;
			}
			.itemTit{
				width: 140rpx;
				height: $hei;
				line-height: $hei;
			}
			.itemCon{
				flex: 1;
				height: 86rpx;
				line-height:86rpx;
				border-radius:16rpx;
				border: 2rpx solid #DDD9F8;
				padding: 0 20rpx;
				text-align: right;
				color: $sq-main0;
				font-weight: 600;
				&.useWork{
					justify-content: flex-end;
				}
				.street{
					color: $sq-main8;
					font-weight: normal;
					&.hasSel{
						color: $sq-main0;
						font-weight: 600;
					}
				}
				.icon-sanjiao{
					color: $sq-main8;
					font-weight: normal;
					font-size: 30rpx;
				}
			}
		}
	}
	.comBtn{
		margin: 0 20rpx;
	}
</style>